<template>
	<view class="user-init-container">


		<view class="form-content">
			<view class="form-section form-item">
				<u-form :model="form" ref="uForm" label-width="140rpx" :border-bottom="false" :label-style="labelStyle">
					<u-form-item label="姓名" prop="name" class="form-label">
						<u-input v-model="form.name" placeholder="请输入姓名" input-align="right" maxlength="500" />
					</u-form-item>
					<u-form-item label="年龄" prop="age" class="form-label">
						<u-input v-model="form.age" placeholder="请输入年龄" input-align="right" />
					</u-form-item>
					<u-form-item label="性别" prop="gender" class="form-label">
						<u-input v-model="form.gender" disabled input-align="right" placeholder="请选择性别"
							@click="showSex = true"></u-input>
					</u-form-item>
					<u-form-item label="民族" prop="nation" class="form-label">
						<u-input v-model="form.nation" placeholder="请选择民族" input-align="right" disabled
							@click="showNation = true"></u-input>
					</u-form-item>
					<u-form-item label="出生日期" prop="birthdate" class="form-label">
						<u-input v-model="form.birthdate" placeholder="请选择出生日期" input-align="right" disabled
							@click="showDate = true"></u-input>
					</u-form-item>
					<u-form-item label="身份" prop="identity" class="form-label">
						<u-input v-model="form.identity" disabled input-align="right" placeholder="请选择身份"
							@click="show = true"></u-input>
					</u-form-item>
				</u-form>
				<u-action-sheet v-model="showSex" :list="actions" title="请选择性别" @click="sexSelect">
				</u-action-sheet>
				<u-select v-model="showNation" :list="nationOptions" title="请选择民族" @confirm="nationSelect"></u-select>
				<!-- <u-action-sheet
				v-model="showNation"
				:list="nationOptions"
				title="请选择民族"
				@click="nationSelect"
				class="nation-select"
		>
		</u-action-sheet> -->
				<u-action-sheet v-model="show" :list="columns" title="请选择身份" @click="identitySelect">
				</u-action-sheet>
				<u-picker v-model="showDate" mode="time" :params="params" default-time="1960-01-01"
					@confirm="birthdateSelect">
				</u-picker>
			</view>
		</view>

		<view class="submit-section">
			<view class="submit-btn" :class="{ disabled }" @click="confirmInfo">
				<text class="submit-text">确认无误，下一步</text>
			</view>
		</view>
	</view>
</template>

<script>
import SelectRegion from '@/components/select-region/select-region'
import { isMobile } from '@/utils/verify'
import * as UserApi from '@/api/user'
// 表单字段元素
const form = {
	name: '',
	age: '',
	gender: '',
	nation: '',
	birthdate: '',
	identity: '',
	id_card: '',
}
// 表单验证规则
const rules = {
	name: [{
		required: true,
		message: '请输入姓名',
		trigger: ['blur', 'change']
	}],
	age: [{
		required: true,
		message: '请输入年龄',
		trigger: ['blur', 'change']
	}],
	gender: [{
		required: true,
		message: '请选择性别',
		trigger: ['blur', 'change']
	}],
	nation: [{
		required: true,
		message: '请选择民族',
		trigger: ['blur', 'change']
	}],
	birthdate: [{
		required: true,
		message: '请选择出生日期',
		trigger: ['blur', 'change']
	}],
	identity: [{
		required: true,
		message: '请选择身份',
		trigger: ['blur', 'change']
	}],
}
export default {
	data() {
		return {
			form,
			rules,
			// 按钮禁用
			disabled: false,
			show: false,
			showSex: false,
			showDate: false,
			showNation: false,
			statusBarHeight: 0,
			params: {
				year: true,
				month: true,
				day: true,
			},
			gender: '',
			identity: '',
			labelStyle: {
				fontSize: '32rpx',
				color: '#333333',
				fontSeight: 400,
			},
			nationOptions: [
				{
					"label": "汉",
					"value": 1
				},
				{
					"label": "蒙古",
					"value": 2
				},
				{
					"label": "回",
					"value": 3
				},
				{
					"label": "藏",
					"value": 4
				},
				{
					"label": "维吾尔",
					"value": 5
				},
				{
					"label": "苗",
					"value": 6
				},
				{
					"label": "彝",
					"value": 7
				},
				{
					"label": "壮",
					"value": 8
				},
				{
					"label": "布依",
					"value": 9
				},
				{
					"label": "朝鲜",
					"value": 10
				},
				{
					"label": "满",
					"value": 11
				},
				{
					"label": "侗",
					"value": 12
				},
				{
					"label": "瑶",
					"value": 13
				},
				{
					"label": "白",
					"value": 14
				},
				{
					"label": "土家",
					"value": 15
				},
				{
					"label": "哈尼",
					"value": 16
				},
				{
					"label": "哈萨克",
					"value": 17
				},
				{
					"label": "傣",
					"value": 18
				},
				{
					"label": "黎",
					"value": 19
				},
				{
					"label": "傈僳",
					"value": 20
				},
				{
					"label": "佤",
					"value": 21
				},
				{
					"label": "畲",
					"value": 22
				},
				{
					"label": "高山",
					"value": 23
				},
				{
					"label": "拉祜",
					"value": 24
				},
				{
					"label": "水",
					"value": 25
				},
				{
					"label": "东乡",
					"value": 26
				},
				{
					"label": "纳西",
					"value": 27
				},
				{
					"label": "景颇",
					"value": 28
				},
				{
					"label": "柯尔克孜",
					"value": 29
				},
				{
					"label": "土",
					"value": 30
				},
				{
					"label": "达斡尔",
					"value": 31
				},
				{
					"label": "仫佬",
					"value": 32
				},
				{
					"label": "羌",
					"value": 33
				},
				{
					"label": "布朗",
					"value": 34
				},
				{
					"label": "撒拉",
					"value": 35
				},
				{
					"label": "毛南",
					"value": 36
				},
				{
					"label": "仡佬",
					"value": 37
				},
				{
					"label": "锡伯",
					"value": 38
				},
				{
					"label": "阿昌",
					"value": 39
				},
				{
					"label": "普米",
					"value": 40
				},
				{
					"label": "塔吉克",
					"value": 41
				},
				{
					"label": "怒",
					"value": 42
				},
				{
					"label": "乌孜别克",
					"value": 43
				},
				{
					"label": "俄罗斯",
					"value": 44
				},
				{
					"label": "鄂温克",
					"value": 45
				},
				{
					"label": "德昂",
					"value": 46
				},
				{
					"label": "保安",
					"value": 47
				},
				{
					"label": "裕固",
					"value": 48
				},
				{
					"label": "京",
					"value": 49
				},
				{
					"label": "塔塔尔",
					"value": 50
				},
				{
					"label": "独龙",
					"value": 51
				},
				{
					"label": "鄂伦春",
					"value": 52
				},
				{
					"label": "赫哲",
					"value": 53
				},
				{
					"label": "门巴",
					"value": 54
				},
				{
					"label": "珞巴",
					"value": 55
				},
				{
					"label": "基诺",
					"value": 56
				}
			],
			columns: [
				{
					text: '患者',
					value: 1
				}, {
					text: '医生',
					value: 2
				}, {
					text: '医护',
					value: 3
				}
			],
			actions: [
				{
					text: '男',
					value: '1',
				},
				{
					text: '女',
					value: '2',
				},
				{
					text: '保密',
					value: '0',
				},
			],
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	onLoad(options) {
		this.getSystemInfo()
		this.form.id_card = options.code || ''
		this.idCardParser()
	},
	methods: {
		sexSelect(e) {
			this.form.gender = this.actions[e].text
			this.gender = this.actions[e].value
			// this.$refs.uForm.validateField('gender')
		},
		identitySelect(e) {
			this.form.identity = this.columns[e].text
			this.identity = this.columns[e].value
		},
		nationSelect(e) {
			console.log(e)
			this.form.nation = e[0].label;
		},
		birthdateSelect(e) {
			this.form.birthdate = e.year + '-' + e.month + '-' + e.day
		},
		getSystemInfo() {
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0
		},
		goBack() {
			uni.navigateBack()
		},
		async idCardParser() {
			const app = this
			UserApi.idCardParser({ id_card: app.form.id_card })
				.then(result => {
					if (result.status == 200) {
						app.form.age = result.data.info.age
						app.form.gender = result.data.info.gender
						app.form.birthdate = result.data.info.birthdate
					}

					console.log(result)
				})
				.finally(() => app.disabled = false)


			// 获取个人信息
			const _userRes = await UserApi.info({});
			console.log('_userRes', _userRes);

			this.form.identity = _userRes.data.userInfo.identity_text
			this.identity = _userRes.data.userInfo.identity


		},
		confirmInfo() {
			const app = this
			if (app.disabled) {
				return;
			}
			app.$refs.uForm.validate(valid => {
				if (valid) {
					app.disabled = true
					const form = app.form
					const type = 1;
					form.gender = app.gender
					form.identity = app.identity
					UserApi.personal(form)
						.then(result => {
							app.$toast(result.message)

							if (form.identity === 1) {
								setTimeout(() => {
									// 跳转到主页面
									this.$navTo('pages/myInfo/edit', { type })
								}, 300)
							} else {
								setTimeout(() => {
									// 跳转到主页面
									this.$navTo('pages/health/index')
								}, 300)
							}

						})
						.finally(() => app.disabled = false)
				}
			})


		}
	}
}
</script>

<style lang="scss" scoped>
.nation-select {
	max-height: 80vh;
	/* 限制高度为视口高度的 80% */
	overflow-y: auto;
	/* 启用纵向滚动 */
}

.user-init-container {
	min-height: 100vh;
	background: #F5F5F5;
	display: flex;
	flex-direction: column;
}

.status-bar {
	background: #FFFFFF;
}

.init-navbar {
	height: 88rpx;
	background: #FFFFFF;
	border-bottom: 1px solid #E5E5E5;
}

.init-navbar .navbar-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding: 0 32rpx;
}

.nav-left {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 48rpx;
	color: #333333;
	font-weight: bold;
}

.nav-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.nav-right {
	display: flex;
	align-items: center;
}

.nav-action-btn {
	width: 60rpx;
	height: 60rpx;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 16rpx;
}

.action-dots,
.action-location {
	font-size: 24rpx;
	color: #666666;
}

.form-content {
	flex: 1;
	padding: 32rpx;
}

.form-section {
	background: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
}

.form-item {
	padding: 48rpx 32rpx;
	border-bottom: 1px solid #F0F0F0;
	justify-content: space-between;
	align-items: center;
}

.form-item:last-child {
	border-bottom: none;
}

.form-label {
	font-size: 32rpx;
	color: #333333;
	font-weight: 400;
}

.form-value {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
}

.submit-section {
	padding: 32rpx 64rpx 60rpx;
}

.submit-btn {
	width: 100%;
	height: 96rpx;
	background: #4ECDC4;
	border-radius: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(78, 205, 196, 0.3);

	// 禁用按钮
	&.disabled {
		background: #dfdfdf;
	}
}

.submit-text {
	font-size: 32rpx;
	color: #FFFFFF;
	font-weight: 500;
}
</style>
